<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/vue.js"></script>
  <style>
    .static{
      width:120px;
      height:120px;
      margin:20px;
      text-align: center;
      line-height: 120px;
      font-size: 50px;
    }
    .a{
      background: crimson;
    }
    .b{
      border-radius: 50%;
    }
    .c{
      border:4px solid darkviolet;
      box-shadow:  0px 0px 2px 2px yellow;
    }
    .wrapper{

    }
    .nav{
      display: flex;
    }
    .nav-item{
      width:100px;
      height:40px;
      line-height: 40px;
      text-align: center;
      background: deepskyblue;
      border-radius: 8px;
      color:#fff;
      font-size: 14px;
      margin:0 10px;
      cursor: pointer;
    }
    .nav-active{
      background: brown;
      color:deepskyblue;
    }
    .main{
      width:360px;
      padding:0 10px;
      margin-top:20px;
      box-sizing: border-box;
    }
    .content{
      width:100%;
      height:340px;
      background: brown;
      border-radius: 10px;
      text-align: center;
      line-height: 340px;
      font-size: 40px;
      color:#fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{title }}</h2>
    <div v-if="flag">
      v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
    </div>
    <div v-else>
      表达式的值 为 false 则什么都不做 不会渲染DOM 
    </div>
    <button @click="flag=!flag" >点击切换</button>

    <div v-if="seen">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>

    <div v-if="score>90">
      A
    </div>
    <div v-else-if="score>80">
      B
    </div>
    <div v-else-if="score>70">
      C
    </div>
    <div v-else-if="score>60">
      D
    </div>
    <div v-else>
      E(不及格)
    </div>

    <div>
      <h2 v-show="show">v-show   指令通过 display 来控制显示和隐藏 </h2>
      <h2 v-show="!show">WUHan2112- daydayup</h2>
      <button @click="show=!show">点击切换</button>
    </div>
    <div v-if="true">
      <div  v-for="">

      </div>
    </div>
    <div v-if="obj.user">
      <h2>
          name=={{obj.user.username}}
      </h2>
      <h2>
        phone=={{obj.user.phone
        }}
      </h2>
    </div>
    
  </div>

  <script>
    const vm = new Vue({
      data:{
        title:"v-if 和 v-show " ,
        flag:true,
        seen:!!1,
        score:42,
        show:true,
        obj:{

        }
      },
      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title; 

        setTimeout(()=>{
          // ajax 
          this.obj = {
            user:{
              username:'zuozuomu',
              phone:"17012341234"
            }
          }
        },1500)
      }
    }).$mount("#app")
   
  </script>
  
      <!-- 
      v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
      表达式的值 为 false 则什么都不做 不会渲染DOM 
      template 包裹的空元素    没有任何效果

      v-else 必须 与它最近的 v-if 匹配 

      v-show   指令通过 display 来控制显示和隐藏 
      带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 

      v-if vs v-show 
      v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 
      v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    

      使用场景 (使用频率)
      v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 
      v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 

      v-if 与 v-for 一起使用 (不推荐)
      如果一定要用  
      v-for 比 v-if 有更高的优先级 
      v-if 写在 v-for(循环) 的外面 

      异步数据 
      错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
      TypeError: Cannot read property 'username' of null
      Cannot read property 'username' of undefined 
     -->
</body>
</html>